<%--
  Created by IntelliJ IDEA.
  User: cyrus
  Date: 2021/04/14
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人资料维护</title>
    <%@include file="../../include/include.jsp" %>
    <link rel="stylesheet" href="${ctx}/resources/css/user/personal-center.css">
</head>
<body>
<div class="personal-container">
    <div class="avatar">
        <input id="fileSelect" type="file" style="display: none" onchange="uploadAvatar(this)">
        <img id="avatar" onclick="changeAvatar()" src="${user.avatar}" alt="用户头像"/>
    </div>
</div>

<script>
    function changeAvatar() {
        // trigger触发对应dom的时间
        $("#fileSelect").trigger("click")
    }

    function uploadAvatar(e) {
        var formdata = new FormData()
        formdata.append("file", e.files[0]);
        $.ajax({
            url:"${ctx}/user/upload/avatar",
            data:formdata,
            type: "POST",
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            success(res){
                if(res.success){
                    $("#avatar").attr("src", res.data.avatar);
                }else{
                    alert(res.msg)
                }
            }
        })
    }
</script>

</body>
</html>
